
.banner{
    height: 680px;
    
        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    
}
/* 云服务service */

.service {
    width: 1080px;
    margin-top: 80px;
    h1{
        color: #000;
        margin-bottom: 10px;
    }
    .text2{
        margin-bottom: 15px;
    }
    .text3{
        display: block;
        margin-bottom: 25px;
    }
    .ulist{
        padding-bottom: 80px;
        li{
            float: left;
            width: 240px;
            margin-right: 40px;
            box-shadow: 2px ;
            // 右移，下移距离。发散，扩大，颜色
            box-shadow: 2px 4px 10px 0 rgb(18 113 239 , .6);

            p:nth-child(2){
                font-size: 22px;
                color: #181818;
                line-height: 34px;
            }
            p:nth-child(3){
                font-size: 12px;
                color: #666;
                line-height: 24px;
            }
            p:nth-child(4){
                font-size: 12px;
                line-height: 31px;
                padding-bottom: 13px;
                margin-top: 10px;
                color: #1271ef;
            }
        }
        li:nth-child(4){
            margin-right: 0;
        }
    }

}
/* api分类 */
.api{
    padding: 80px 0 50px;
    background-color: #f8f9fb;
    h1{
        color: #000;
        margin-bottom: 10px;
    }
    .text2{
        margin-bottom: 15px;
    }
    .text3{
        display: block;
        margin-bottom: 25px;
    }
    ul{
        li{
            width: 224px;
            height: 138px;
            box-shadow: 1px 4px 8px 0 rgb(18 113 239 / 60%);
            background-color: #fff;
            padding-top: 36px;
            margin-right: 20px;
            margin-bottom: 20px;
            // p会继承li的行高，这里就不设置了
            // line-height: 138px;
            a{
                display: block;
                img{
                    vertical-align: middle;
                }
                p{
                    font-size: 16px;
                    line-height: 40px;
                    color: #181818;
                }
            }

            
        }
        li:nth-child(5),
        li:nth-child(10){
            margin-right: 0;
        }
    }
}
/* 慧集 apiMaster */
.master{
    padding: 70px 0 50px;
    h1{
        color: #000;
        margin-bottom: 10px;
    }
    .text2{
        margin-bottom: 15px;
    }
    .text3{
        display: block;
        margin-bottom: 25px;
    }
    .main{
        height: 605px;
        background: url(../imgs/master-left-bg.svg)no-repeat;
        ul{
            width: 507px;
            height: 546px;
            margin-top: 18px;
            li{
                width: 100%;
                position: relative;
                height: 81px;
                background-color: #FBFBFD;
                float: right;
                padding-left: 20px;
                padding-top: 15px;
                padding-bottom: 18px;
                margin-bottom: 20px;
                p{
                    text-align: left;
                }
                p:nth-of-type(1){
                    line-height: 26px;
                    color: #333;
                    font-size: 18px;

                    &::before{
                        content: '';
                        display: inline-block;
                        width: 23px;
                        height: 16px;
                        background: url(../imgs/master-item-icon-01.svg)no-repeat;
                        
                    }
                }
                span{
                    position: absolute;
                    width: 4px;
                    height: 24px;
                    left: 0px;
                    top: 28px;
                    background-color: #1271ef;
                }

            }
            li:nth-child(2){
                p:nth-of-type(1)::before{
                    background: url(../imgs/master-item-icon-02.svg)no-repeat;
                }
            }
            li:nth-child(3){
                p:nth-of-type(1)::before{
                    background: url(../imgs/master-item-icon-03.svg)no-repeat;
                }
            }
            li:nth-child(4){
                p:nth-of-type(1)::before{
                    background: url(../imgs/master-item-icon-04.svg)no-repeat;
                }
            }
            li:nth-child(5){
                p:nth-of-type(1)::before{
                    background: url(../imgs/master-item-icon-05.svg)no-repeat;
                }
            }
            li:nth-child(6){
                p:nth-of-type(1)::before{
                    background: url(../imgs/master-item-icon-06.svg)no-repeat;
                }
            }
        }
    }
}
/* 助力企业 */
.business{
    padding: 70px 0 50px;
    h1{
        color: #000;
        margin-bottom: 10px;
    }

    .text3{
        display: block;
        margin-bottom: 88px;
    }
    .content{
        background-color: #f8f9fb;

        .container{
            position: relative;
            height: 270px;
            .bus-list{
                // 1s和定时器的时间一致
                transition: all 1.5s;
                width: 100%;
                position: absolute;
                top: 0;
                opacity: 0;
                .imgbox{
                    position: relative;
                    width: 580px;
                    height: 270px;
                    img{
                        position: absolute;
                        top: -20px;
                        width: 100%;
                        height: 290px;                  
                    }
                }
                .item-text{
                    position: relative;
                    width: 550px;
                    height: 270px;
                    font-size: 14px;
                    line-height: 24px;
                    padding-top: 50px;
                    // text-align: justify;文字两端对齐
                    text-align: justify;
                    img{
                        position: absolute;
                        top: -20px;
                        left: 0px;                  
                    }
                    p:nth-of-type(1){
                        margin-bottom: 50px;
                    }
                    p:nth-of-type(2){
                        text-align: right;
                        span{
                            position: relative;
                            &::before{
                                content: '';
                                position: absolute;
                                display: inline-block;
                                width: 14px;
                                height: 4px;
                                background-color: #1271ef;
                                left: -19px;
                                top: 8px;
                            }

                        }
                        
                    }
                    
                }
            }
            .active{
                opacity: 1;
                z-index: 10;
            }
            
        }
    }

}

/* 数据安全 datasafe */
.datasafe{
    .logo{
        height: 32px;
        margin: 50px 0;
        div{
            float: left;
            margin: 0 30px;
        }
    }
    h1{
        color: #000;
        margin: 20px 0;
    }
    .text2{
        margin-bottom: 15px;
    }
    .text3{
        display: block;
        margin-bottom: 25px;
    }
    ul{
        li{
            width: 200px;
            height: 109px;
            float: left;
        }
        li:nth-of-type(3),
        li:nth-of-type(4),
        li:nth-of-type(5){
            margin-top: 21px;
        }
    }
}

/* 体验experience */

.experience{
    margin: 50px 0 30px;
    .logo-register{
        height: 241px;
        padding-top: 64px;
        background: url(../imgs/login-register-bg.svg)no-repeat #1271ef;
        .container{
            p{
                font-size: 32px;
                color: #fff;
                margin-bottom: 22px;
            }
            a{
                display: block;
                width: 128px;
                height: 40px;
                line-height: 40px;
                color: #fff;
                font-size: 12px;
                border: 1px solid #fff;
                margin: 0 auto;
            }
        }
    }
}


/* top */
.top {
    width: 40px;
    height: 40px;
    background: url("../imgs/returntopicon.jpg") no-repeat -268px -57px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    // display: none;

    &:hover {
        background-position-y: -97px;
    }
}

